import React, { Component } from 'react';
import './PageHome.css';

import DireactPagination from './DiReactPagination.js';


class PageHome extends Component {
	
	constructor(props) {
		super(props);
		// 设置 initial state
		this.state = {
			pagename:"首页",
		
		
		
			list: [],                //存放返回当前页的数据
			
			current:1,               //存放返回当前第几页
			count:2,                          //当前页前后页数    (默认：2)
			pageCount:"",            //存放返回总页数
			showPageNum:1,					//是否显示页码     （默认值：1-显示 其他-不显示）
			showPageCount:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）
			totalData:"",            //存放返回数据总条数
			showTotalData:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
			nextPage:false,                   //是否有下一页
			coping:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
			showSkipPage:1,               //是否显示跳页功能（默认值：1-显示 其他-不显示）
			
			
			
			
			
			list2: [],                //存放返回当前页的数据
			
			current2:1,               //存放返回当前第几页
			count2:1,                          //当前页前后页数    (默认：2)
			pageCount2:"",            //存放返回总页数
			showPageNum2:1,					//是否显示页码     （默认值：1-显示 其他-不显示）
			showPageCount2:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）
			totalData2:"",            //存放返回数据总条数
			showTotalData2:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
			nextPage2:false,                   //是否有下一页
			coping2:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
			showSkipPage2:1,               //是否显示跳页功能（默认值：1-显示 其他-不显示）
		
		
		
			
			list3: [],                //存放返回当前页的数据
			
			current3:1,               //存放返回当前第几页
			count3:1,                          //当前页前后页数    (默认：2)
			pageCount3:"",            //存放返回总页数
			showPageNum3:1,					//是否显示页码     （默认值：1-显示 其他-不显示）
			showPageCount3:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）
			totalData3:"",            //存放返回数据总条数
			showTotalData3:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
			nextPage3:false,                   //是否有下一页
			coping3:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
			showSkipPage3:1,               //是否显示跳页功能（默认值：1-显示 其他-不显示）
		
		
		
			
			
			list4: [],                //存放返回当前页的数据
			
			current4:1,               //存放返回当前第几页
			count4:1,                          //当前页前后页数    (默认：2)
			pageCount4:"",            //存放返回总页数
			showPageNum4:1,					//是否显示页码     （默认值：1-显示 其他-不显示）
			showPageCount4:0,               //是否显示总页数 （默认值：1-显示 其他-不显示）
			totalData4:"",            //存放返回数据总条数
			showTotalData4:0,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
			nextPage4:false,                   //是否有下一页
			coping4:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
			showSkipPage4:0,               //是否显示跳页功能（默认值：1-显示 其他-不显示）		
			
			
			
			list5: [],                //存放返回当前页的数据
			
			current5:1,               //存放返回当前第几页
			count5:1,                          //当前页前后页数    (默认：2)
			pageCount5:"",            //存放返回总页数
			showPageNum5:0,					//是否显示页码     （默认值：1-显示 其他-不显示）
			showPageCount5:0,               //是否显示总页数 （默认值：1-显示 其他-不显示）
			totalData5:"",            //存放返回数据总条数
			showTotalData5:0,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
			nextPage5:false,                   //是否有下一页
			coping5:0,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
			showSkipPage5:0               //是否显示跳页功能（默认值：1-显示 其他-不显示）		
		};
	}


  	runAjax(current){

			var list=[];
			var pageCount="";
			var nextPage="";
			var totalData="";
			//模拟ajax数据 1-7页
			setTimeout(function(){		
				if(current==1){
					list=[
						{id:1,text:"我是显示内容111111"},
						{id:2,text:"我是显示内容222222"},
						{id:3,text:"我是显示内容3333333333"},
						{id:4,text:"我是显示内容44444444444"},
						{id:5,text:"我是显示内容555555555"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;
				}else if(current==2){
					list=[
						{id:1,text:"我是显示内容66666666"},
						{id:2,text:"我是显示内容7777777777"},
						{id:3,text:"我是显示内容8888888888"},
						{id:4,text:"我是显示内容99999999999"},
						{id:5,text:"我是显示内容101010"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==3){
					list=[
						{id:1,text:"我是显示内容111111111111111"},
						{id:2,text:"我是显示内容121212"},
						{id:3,text:"我是显示内容131313"},
						{id:4,text:"我是显示内容141414"},
						{id:5,text:"我是显示内容15515"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==4){
					list=[
						{id:1,text:"我是显示内容161616"},
						{id:2,text:"我是显示内容171717"},
						{id:3,text:"我是显示内容181818"},
						{id:4,text:"我是显示内容191919"},
						{id:5,text:"我是显示内容202020"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==5){
					list=[
						{id:1,text:"我是显示内容2121"},
						{id:2,text:"我是显示内容22222"},
						{id:3,text:"我是显示内容232323"},
						{id:4,text:"我是显示内容242424"},
						{id:5,text:"我是显示内容252525"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==6){
					list=[
						{id:1,text:"我是显示内容2626"},
						{id:2,text:"我是显示内容2727"},
						{id:3,text:"我是显示内容2828"},
						{id:4,text:"我是显示内容2929"},
						{id:5,text:"我是显示内容3030"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==7){
					list=[
						{id:1,text:"我是显示内容3131"},
						{id:2,text:"我是显示内容3232"}
					]
					pageCount=7;
					nextPage=false;
					totalData=32;			
				};
			
				
				this.setState({
					list:list,
					current:current,
					pageCount:pageCount,
					nextPage:nextPage,
					totalData:totalData	
				})
				  
				  
			}.bind(this),200);		
	}
	
	runAjax2(current){
			
			var list=[];
			var pageCount="";
			var nextPage="";
			var totalData="";
			//模拟ajax数据 1-3页
			setTimeout(function(){		
				if(current==1){
					list=[
						{id:1,text:"我是显示内容111111"},
						{id:2,text:"我是显示内容222222"},
						{id:3,text:"我是显示内容3333333333"},
						{id:4,text:"我是显示内容44444444444"},
						{id:5,text:"我是显示内容555555555"},
					]
					pageCount=3;
					nextPage=true;
					totalData=14;
				}else if(current==2){
					list=[
						{id:1,text:"我是显示内容66666666"},
						{id:2,text:"我是显示内容7777777777"},
						{id:3,text:"我是显示内容8888888888"},
						{id:4,text:"我是显示内容99999999999"},
						{id:5,text:"我是显示内容101010"},
					]
					pageCount=3;
					nextPage=true;
					totalData=14;			
				}else if(current==3){
					list=[
						{id:1,text:"我是显示内容111111111111111"},
						{id:2,text:"我是显示内容121212"},
						{id:3,text:"我是显示内容131313"},
						{id:4,text:"我是显示内容141414"}
					]
					pageCount=3;
					nextPage=false;
					totalData=14;			
				};
			
				this.setState({
					list2:list,
					current2:current,
					pageCount2:pageCount,
					nextPage2:nextPage,
					totalData2:totalData	
				})
				  
				  
			}.bind(this),200);		
	}
	
	runAjax3(current){
		
			
			var list=[];
			var pageCount="";
			var nextPage="";
			var totalData="";
			//模拟ajax数据 1-1页
			setTimeout(function(){		
				if(current==1){
					list=[
						{id:1,text:"我是显示内容111111"},
						{id:2,text:"我是显示内容222222"},
						{id:3,text:"我是显示内容3333333333"},
						{id:4,text:"我是显示内容44444444444"},
						{id:5,text:"我是显示内容555555555"},
					]
					pageCount=1;
					nextPage=false;
					totalData=4;
				};
			
				this.setState({
					list3:list,
					current3:current,
					pageCount3:pageCount,
					nextPage3:nextPage,
					totalData3:totalData	
				})
				  
				  
			}.bind(this),200);		
	}
	
  	runAjax4(current){
			
			
			var list=[];
			var pageCount="";
			var nextPage="";
			var totalData="";
			//模拟ajax数据 1-7页
			setTimeout(function(){		
				if(current==1){
					list=[
						{id:1,text:"我是显示内容111111"},
						{id:2,text:"我是显示内容222222"},
						{id:3,text:"我是显示内容3333333333"},
						{id:4,text:"我是显示内容44444444444"},
						{id:5,text:"我是显示内容555555555"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;
				}else if(current==2){
					list=[
						{id:1,text:"我是显示内容66666666"},
						{id:2,text:"我是显示内容7777777777"},
						{id:3,text:"我是显示内容8888888888"},
						{id:4,text:"我是显示内容99999999999"},
						{id:5,text:"我是显示内容101010"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==3){
					list=[
						{id:1,text:"我是显示内容111111111111111"},
						{id:2,text:"我是显示内容121212"},
						{id:3,text:"我是显示内容131313"},
						{id:4,text:"我是显示内容141414"},
						{id:5,text:"我是显示内容15515"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==4){
					list=[
						{id:1,text:"我是显示内容161616"},
						{id:2,text:"我是显示内容171717"},
						{id:3,text:"我是显示内容181818"},
						{id:4,text:"我是显示内容191919"},
						{id:5,text:"我是显示内容202020"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==5){
					list=[
						{id:1,text:"我是显示内容2121"},
						{id:2,text:"我是显示内容22222"},
						{id:3,text:"我是显示内容232323"},
						{id:4,text:"我是显示内容242424"},
						{id:5,text:"我是显示内容252525"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==6){
					list=[
						{id:1,text:"我是显示内容2626"},
						{id:2,text:"我是显示内容2727"},
						{id:3,text:"我是显示内容2828"},
						{id:4,text:"我是显示内容2929"},
						{id:5,text:"我是显示内容3030"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==7){
					list=[
						{id:1,text:"我是显示内容3131"},
						{id:2,text:"我是显示内容3232"}
					]
					pageCount=7;
					nextPage=false;
					totalData=32;			
				};
			
				this.setState({
					list4:list,
					current4:current,
					pageCount4:pageCount,
					nextPage4:nextPage,
					totalData4:totalData	
				})
				  
				  
			}.bind(this),200);		
	}
	
  	runAjax5(current){
			
			
			var list=[];
			var pageCount="";
			var nextPage="";
			var totalData="";
			//模拟ajax数据 1-7页
			setTimeout(function(){		
				if(current==1){
					list=[
						{id:1,text:"我是显示内容111111"},
						{id:2,text:"我是显示内容222222"},
						{id:3,text:"我是显示内容3333333333"},
						{id:4,text:"我是显示内容44444444444"},
						{id:5,text:"我是显示内容555555555"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;
				}else if(current==2){
					list=[
						{id:1,text:"我是显示内容66666666"},
						{id:2,text:"我是显示内容7777777777"},
						{id:3,text:"我是显示内容8888888888"},
						{id:4,text:"我是显示内容99999999999"},
						{id:5,text:"我是显示内容101010"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==3){
					list=[
						{id:1,text:"我是显示内容111111111111111"},
						{id:2,text:"我是显示内容121212"},
						{id:3,text:"我是显示内容131313"},
						{id:4,text:"我是显示内容141414"},
						{id:5,text:"我是显示内容15515"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==4){
					list=[
						{id:1,text:"我是显示内容161616"},
						{id:2,text:"我是显示内容171717"},
						{id:3,text:"我是显示内容181818"},
						{id:4,text:"我是显示内容191919"},
						{id:5,text:"我是显示内容202020"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==5){
					list=[
						{id:1,text:"我是显示内容2121"},
						{id:2,text:"我是显示内容22222"},
						{id:3,text:"我是显示内容232323"},
						{id:4,text:"我是显示内容242424"},
						{id:5,text:"我是显示内容252525"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==6){
					list=[
						{id:1,text:"我是显示内容2626"},
						{id:2,text:"我是显示内容2727"},
						{id:3,text:"我是显示内容2828"},
						{id:4,text:"我是显示内容2929"},
						{id:5,text:"我是显示内容3030"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==7){
					list=[
						{id:1,text:"我是显示内容3131"},
						{id:2,text:"我是显示内容3232"}
					]
					pageCount=7;
					nextPage=false;
					totalData=32;			
				};
			
				this.setState({
					list5:list,
					current5:current,
					pageCount5:pageCount,
					nextPage5:nextPage,
					totalData5:totalData	
				})
				  
				  
			}.bind(this),200);		
	}

	
	render() {
		return (
			<div className="page">
					<h2>所在页面位置：{this.state.pagename}</h2>
					<h3 className="abc">
						模拟ajax数据 共7页 32条  <br/>演示内容：页码数量设置显示5个
					</h3>
					<ul className="ull">
						{
							this.state.list.map(function(item,index){
								return <li key={index}>
											<span className="l">id:{item.id}</span>
											<span className="r">内容：{item.text}</span>
									   </li>
							})
						}
					</ul>
					<DireactPagination 
						current={this.state.current} 
						count={this.state.count} 
						pageCount={this.state.pageCount} 
						showPageNum={this.state.showPageNum}
						showPageCount={this.state.showPageCount}
						totalData={this.state.totalData}
						showTotalData={this.state.showTotalData}
						nextPage={this.state.nextPage}
						coping={this.state.coping}
						showSkipPage={this.state.showSkipPage}
						runAjax={this.runAjax.bind(this)}>
					</DireactPagination>
					<pre style={{background:'#000',color:'#fff',width:'800px',height:'250px',textAlign:"left"}}>
			
					//配置
					current:1,               //存放返回当前第几页 <br/>
					count:2,                          //当前页前后页数    (默认：2)<br/>
					pageCount:"",            //存放返回总页数<br/>
					showPageNum:1,					//是否显示页码     （默认值：1-显示 其他-不显示）<br/>
					showPageCount:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）<br/>
					totalData:"",            //存放返回数据总条数<br/>
					showTotalData:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）<br/>
					nextPage:false,                   //是否有下一页<br/>
					coping:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）<br/>
					showSkipPage:1,               //是否显示跳页功能（默认值：1-显示 其他-不显<br/>
					</pre>
					<h3 className="abc">
						模拟ajax数据 共3页 14条<br/>演示内容：页码数量设置显示3个
					</h3>
					<ul className="ull">
						{
							this.state.list2.map(function(item,index){
								return <li key={index}>
											<span className="l">id:{item.id}</span>
											<span className="r">内容：{item.text}</span>
									   </li>
							})
						}
					</ul>
					<DireactPagination 
						current={this.state.current2} 
						count={this.state.count2} 
						pageCount={this.state.pageCount2} 
						showPageNum={this.state.showPageNum2}
						showPageCount={this.state.showPageCount2}
						totalData={this.state.totalData2}
						showTotalData={this.state.showTotalData2}
						nextPage={this.state.nextPage2}
						coping={this.state.coping2}
						showSkipPage={this.state.showSkipPage2}
						runAjax={this.runAjax2.bind(this)}>
					</DireactPagination>
					<pre style={{background:'#000',color:'#fff',width:'800px',height:'250px',textAlign:"left"}}>
						
					//配置
					current2:1,               //存放返回当前第几页<br/>
					count2:1,                          //当前页前后页数    (默认：2)<br/>
					pageCount2:"",            //存放返回总页数<br/>
					showPageNum2:1,					//是否显示页码     （默认值：1-显示 其他-不显示）<br/>
					showPageCount2:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）<br/>
					totalData2:"",            //存放返回数据总条数<br/>
					showTotalData2:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）<br/>
					nextPage2:false,                   //是否有下一页<br/>
					coping2:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）<br/>
					showSkipPage2:1,               //是否显示跳页功能（默认值：1-显示 其他-不显示）<br/>
					</pre>			
					<h3 className="abc">
						模拟ajax数据 共1页 3条<br/>演示内容：只有一页数据
					</h3>
					<ul className="ull">
						{
							this.state.list3.map(function(item,index){
								return <li key={index}>
											<span className="l">id:{item.id}</span>
											<span className="r">内容：{item.text}</span>
									   </li>
							})
						}
					</ul>
					<DireactPagination 
						current={this.state.current3} 
						count={this.state.count3} 
						pageCount={this.state.pageCount3} 
						showPageNum={this.state.showPageNum3}
						showPageCount={this.state.showPageCount3}
						totalData={this.state.totalData3}
						showTotalData={this.state.showTotalData3}
						nextPage={this.state.nextPage3}
						coping={this.state.coping3}
						showSkipPage={this.state.showSkipPage3}
						runAjax={this.runAjax3.bind(this)}>
					</DireactPagination>
					<pre style={{background:'#000',color:'#fff',width:'800px',height:'250px',textAlign:"left"}}>
						
					//配置
					current3:1,               //存放返回当前第几页<br/>
					count3:1,                          //当前页前后页数    (默认：2)<br/>
					pageCount3:"",            //存放返回总页数<br/>
					showPageNum3:1,					//是否显示页码     （默认值：1-显示 其他-不显示）<br/>
					showPageCount3:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）<br/>
					totalData3:"",            //存放返回数据总条数<br/>
					showTotalData3:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）<br/>
					nextPage3:false,                   //是否有下一页<br/>
					coping3:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）<br/>
					showSkipPage3:1,               //是否显示跳页功能（默认值：1-显示 其他-不显示）<br/>
					</pre>	
					<h3 className="abc">
						模拟ajax数据 共7页 32条<br/>演示内容：只显示页码等链接按钮
					</h3>
					<ul className="ull">
						{
							this.state.list4.map(function(item,index){
								return <li key={index}>
											<span className="l">id:{item.id}</span>
											<span className="r">内容：{item.text}</span>
									   </li>
							})
						}
					</ul>
					<DireactPagination 
						current={this.state.current4} 
						count={this.state.count4} 
						pageCount={this.state.pageCount4} 
						showPageNum={this.state.showPageNum4}
						showPageCount={this.state.showPageCount4}
						totalData={this.state.totalData4}
						showTotalData={this.state.showTotalData4}
						nextPage={this.state.nextPage4}
						coping={this.state.coping4}
						showSkipPage={this.state.showSkipPage4}
						runAjax={this.runAjax4.bind(this)}>
					</DireactPagination>
					<pre style={{background:'#000',color:'#fff',width:'800px',height:'250px',textAlign:"left"}}>
						
					//配置
					current4:1,               //存放返回当前第几页<br/>
					count4:1,                          //当前页前后页数    (默认：2)<br/>
					pageCount4:"",            //存放返回总页数<br/>
					showPageNum4:1,					//是否显示页码     （默认值：1-显示 其他-不显示）<br/>
					showPageCount4:0,               //是否显示总页数 （默认值：1-显示 其他-不显示）<br/>
					totalData4:"",            //存放返回数据总条数<br/>
					showTotalData4:0,               //是否显示数据总条数（默认值：1-显示 其他-不显示）<br/>
					nextPage4:false,                   //是否有下一页<br/>
					coping4:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）<br/>
					showSkipPage4:0,               //是否显示跳页功能（默认值：1-显示 其他-不显示）<br/>		
					</pre>	
					<h3 className="abc">
						模拟ajax数据 共7页 32条<br/>演示内容：只显示上一页下一页按钮
					</h3>
					<ul className="ull">
						{
							this.state.list5.map(function(item,index){
								return <li key={index}>
											<span className="l">id:{item.id}</span>
											<span className="r">内容：{item.text}</span>
									   </li>
							})
						}
					</ul>
					<DireactPagination 
						current={this.state.current5} 
						count={this.state.count5} 
						pageCount={this.state.pageCount5} 
						showPageNum={this.state.showPageNum5}
						showPageCount={this.state.showPageCount5}
						totalData={this.state.totalData5}
						showTotalData={this.state.showTotalData5}
						nextPage={this.state.nextPage5}
						coping={this.state.coping5}
						showSkipPage={this.state.showSkipPage5}
						runAjax={this.runAjax5.bind(this)}>
					</DireactPagination>
					<pre style={{background:'#000',color:'#fff',width:'800px',height:'250px',textAlign:"left"}}>
						
					//配置
					current5:1,               //存放返回当前第几页<br/>
					count5:1,                          //当前页前后页数    (默认：2)<br/>
					pageCount5:"",            //存放返回总页数<br/>
					showPageNum5:0,					//是否显示页码     （默认值：1-显示 其他-不显示）<br/>
					showPageCount5:0,               //是否显示总页数 （默认值：1-显示 其他-不显示）<br/>
					totalData5:"",            //存放返回数据总条数<br/>
					showTotalData5:0,               //是否显示数据总条数（默认值：1-显示 其他-不显示）<br/>
					nextPage5:false,                   //是否有下一页<br/>
					coping5:0,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）<br/>
					showSkipPage5:0               //是否显示跳页功能（默认值：1-显示 其他-不显示）<br/>	
					</pre>	
			</div>
		);
	}
	
	componentDidMount() {
	  	//模拟返回第一页数据
  		this.runAjax(1);
		//模拟返回第一页数据
  		this.runAjax2(1);
		//模拟返回第一页数据
  		this.runAjax3(1);
		//模拟返回第一页数据
  		this.runAjax4(1);
		//模拟返回第一页数据
  		this.runAjax5(1);
	}

	
}

export default PageHome;
